<template>
  <div class="gre-short-answer">
    <div class="slide-container" :class="{ 'slide-left': isAnalysis }">
      <!-- 答题视图 -->
      <div class="answer-view">
        <div class="content-wrapper">
          <!-- <div v-if="leftContent" class="left-content">
            <div class="content-box" v-html="leftContent"></div>
          </div> -->

          <askStatus  v-if="examStore.currQuestion.showAnswer" />
          <div class="right-box-list">
            <div class="right-content" :class="{ 'full-width': !leftContent }">
              <div
                class="right-quesition"
                v-html="mathHTMLToShow(examStore.currQuestion.title)"
              ></div>

              <!-- <div class="formulaWrapper">
                  <div class="formula-box">
                    <div class="formula-nums column">
                      <div
                        style="border: 1px solid #ccc; margin-top: 10px"
                        v-for="(item, index) in editorList"
                      >
                        <WeToolbar
                          style="width: 100%; border-bottom: 1px solid #ccc"
                          :editor="item.editorRef"
                          :defaultConfig="item.toolbarConfig"
                          :mode="mode"
                        />
                        <WeEditor
                          style="width: 100%; height: 100px; overflow-y: hidden"
                          v-model="item.valueHtml"
                          :defaultConfig="item.editorConfig"
                          :mode="mode"
                          @onCreated="(editor) => handleCreated(index, editor)"
                        />
                      </div>
                    </div>
                  </div>
                </div> -->

              <div class="formulaWrapper" v-for="(item, index) in answerList">
                <div class="formula-box" v-if="item.isMark">
                  <div class="X-le">答案：</div>
                  <div class="X-ri">
                    <div class="X-first">
                      <el-input type="number" v-model="item.numTop" />
                    </div>
                    <div class="X-v"></div>
                    <div class="X-end">
                      <el-input type="number" v-model="item.numBottom"></el-input>
                    </div>
                  </div>
                </div>
                <div class="formula-box">
                  <div class="formula-nums flex-center" v-if="!item.isMark">
                    <span class="formula-label">答案：</span>
                    <el-input type="number" v-model="item.num" />
                  </div>
                </div>
              </div>

              <!-- 解析代码 -->
              <div class="formulaWrapper result-an" v-if="examStore.currQuestion.showAnswer">
                <div class="nums-title">正确答案：</div>
                <div class="b-c">
                  
                  <div class="formula-nums" v-for="(item, index) in answerList">
                    <span class="formula-label" v-if="answerList.length !== 1">{{ index + 1 }}. </span>
                    <span v-html="changeHTML(mathHTMLToShow(item.value))"></span>
                  </div>
                </div>
              </div>

              <!-- <div class="answer-area">
                <div class="answer-bottom">提示语固定位置，上下左右间距固定</div>
              </div> -->
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, shallowRef } from "vue";
import askStatus from "../askStatus.vue";
import { mathHTMLToShow } from "@/utils/index";
import { useExam } from "@/stores/exam.js";
const examStore = useExam();

const props = defineProps({
  leftContent: {
    type: String,
    default: "",
  },
  rightTitle: {
    type: String,
    default: "",
  },
  initialAnswer: {
    type: String,
    default: "",
  },
  isAnalysis: {
    type: Boolean,
    default: false,
  },
  isCorrect: {
    type: Boolean,
    default: false,
  },
  correctAnswer: {
    type: String,
    required: true,
  },
});
const result = ref({
  sumCurrent: "",
  grave: "",
  molecule: "",
});

// 是否是分数
const answerList = ref(
  examStore.currQuestion.answerList.map((it, ind) => {
    return {
      ...it,
      isMark: (it.value.match(/<p>([^<]*)<\/p>/)?.[1] || "").includes("/"),
      numTop: "",
      numBottom: "",
      num: "",
    };
  })
);

watch(
  () => answerList.value,
  (val) => {
    const myAnswer = val
      .map((it, ind) => {
        if (it.isMark)
          return {
            value: it.numTop && it.numBottom ? it.numTop + "/" + it.numBottom : "",
          };
        else return { value: it.num };
      })
      .map((i) => i.value)
      .join();

    const rightAnswer = examStore.currQuestion.answerList
      .map((i) => i.value.match(/<p>([^<]*)<\/p>/)?.[1] || "")
      .join();

    console.log(myAnswer, rightAnswer, "答案");

    examStore.currQuestion.answer_content = myAnswer;
    examStore.currQuestion.is_right = examStore.examInfo.section[
      examStore.currQuestion.sectionIndex
    ].question[examStore.currQuestion.index].is_right = myAnswer == rightAnswer ? 1 : 0;
  },
  {
    deep: true,
  }
);

watch(
  () => examStore.currQuestion.answer_content,
  (val) => {
    let myAnswer = val.split(",");
    answerList.value.forEach((i, ind) => {
      if (i.isMark) {
        i.numTop = myAnswer[ind].split("/")[0];
        i.numBottom = myAnswer[ind].split("/")[1];
      } else {
        i.num = myAnswer[ind];
      }
    });
  },
  { immediate: true }
);

// const editorList = ref(
//   Array.from({ length: examStore.currQuestion.answerList.length }, (i, ind) => ({
//     editorRef: shallowRef(),
//     valueHtml: "<p></p>",
//     toolbarConfig: {},
//     editorConfig: { placeholder: "请输入..." },
//   }))
// );

// // 组件销毁时，也及时销毁编辑器
// onBeforeUnmount(() => {
//   // const editor = editorRef.value;
//   // if (editor == null) return;
//   // editor.destroy();

//   editorList.value.forEach((i) => {
//     if (i.editorRef == null) return;
//     i.editorRef.destroy();
//   });
// });

// const handleCreated = (index, editor) => {
//   // editorRef.value = editor; // 记录 editor 实例，重要！
//   editorList.value[index].editorRef = editor;
// };

// watch(
//   () => editorList.value,
//   (val) => {
//     examStore.currQuestion.answer_content = val.map((it) => it.valueHtml).join();
//     examStore.currQuestion.is_right = 0;
//   },
//   {
//     deep: true,
//   }
// );

// watch(
//   () => examStore.currQuestion.answer_content,
//   (val) => {
//     const content = val.split(",");
//     editorList.value.forEach((i, ind) => {
//       i.valueHtml = content[ind];
//     });
//   },
//   {
//     immediate: true,
//   }
// );

// ... 其他代码保持不变 ...
</script>

<style lang="scss" scoped>
.gre-short-answer {
  position: relative;
  overflow: hidden;

  .slide-container {
    display: flex;
    width: 100%;
    transition: transform 0.3s ease;
    .answer-view {
      width: 100%;
    }
    .content-wrapper {
      display: flex;
      .left-content,
      .right-box-list {
        flex: 1;
      }
      .left-content {
        border-right: 1px solid #ccc;
        margin-right: 20px;
      }
      .right-box-list {
        .formula-box {
          display: flex;
          align-items: center;
          justify-content: center;
          margin: 60px;
          .X-le {
            margin-right: 10px;
          }
          .X-ri {
            // width:200px;
            .X-first,
            .X-end {
              padding: 0px 10px;
            }
          }
          .X-v {
            width: 100%;
            margin: 10px 0px;
            height: 1px;
            background-color: #ccc;
          }
        }
      }
    }
  }

  // ... 其他样式保持不变 ...

  .analysis-content {
    padding: 20px;

    .correct-answer {
      .answer-title {
        font-size: 16px;
        font-weight: 500;
        color: #126983;
        margin-bottom: 10px;
      }

      .answer-text {
        font-size: 14px;
        line-height: 1.6;
        color: #333;
      }
    }
  }
}
.answer-area {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 20px;
  .answer-bottom {
    // width: 200px;
    padding: 10px;
    height: 42px;
    background-color: #d3d3d3;
    color: #fff;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: PingFang SC;
    font-weight: 400;
    margin-bottom: 20px;
    font-size: 16px;
    line-height: 22.4px;
    letter-spacing: 0%;
    color: #000000;
  }
}

.right-quesition {
  margin-bottom: 20px;
}
.formulaWrapper {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  justify-content: center;
  .formula-nums {
    display: flex;
    .formula-label {
      margin-right: 10px;
      flex-shrink: 0;
    }
  }
}
.result-an {
  display: flex;
  flex-direction: column;
  .formula-nums {
    color: #1e8fda !important;
  }
  .formula-box {
    margin: 10px 0px !important;
    font-family: PingFang SC;
    font-weight: 400;
    font-size: 14px;
    line-height: 19.6px;
    letter-spacing: 0%;
    color: #1e8fda !important;
    .X-v {
      margin: 2px 0px !important;
    }
  }
}
.nums-title {
  font-family: PingFang SC;
  font-weight: 600;
  font-size: 14px;
  line-height: 19.6px;
  letter-spacing: 0%;
  color: #1e8fda;
}
// ... 其他样式保持不变 ...
</style>
